<template>
  <div id="app">
    <!-- <router-view/> -->
    <!-- <Child/>
    {{msg}}-->
    <!-- {{myName}}
    <KInput v-model="myName"></KInput>-->
    <!-- <k-form :model="formInline" ref="formInline" :rules="rules">
      <k-form-item label="审批人" prop="user">
        <k-input v-model="formInline.user" placeholder="审批人"></k-input>
      </k-form-item>
      <k-form-item label="活动区域" prop="region">
        <k-input v-model="formInline.region" placeholder="活动区域"></k-input>
      </k-form-item>
      <k-form-item>
        <el-button type="primary" @click="onSubmit('formInline')">查询</el-button>
      </k-form-item>
    </k-form>-->
    <!-- <button ref="btn" @click="message">点我</button>
    <Box ref="box" v-if="showing">哈哈哈</Box>-->
    <button ref="btn" @click="addNum">{{appShowNum}}+5</button>
  </div>
</template>

<script>
import Child from "@/components/Child";
import Box from "@/components/Box";
import KInput from "@/components/KInput";
import KForm from "@/components/KForm";
import KFormItem from "@/components/KFormItem";
export default {
  name: "App",
  components: {
    Child,
    KInput,
    KFormItem,
    KForm,
    Box
  },
  provide: {
    name: "马大炮"
  },
  computed: {
    appShowNum() {
      return this.$store.getters.getNum;
    }
  },
  data() {
    return {
      msg: "11",
      showing: false,
      myName: "马少东",
      formInline: {
        user: "",
        region: ""
      },
      rules: {
        user: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        region: [{ required: true, message: "请选择活动区域", trigger: "blur" }]
      }
    };
  },
  methods: {
    addNum() {
      this.$store.commit("addNum", { num: 5 });
    },
    message() {
      console.log(this.$refs);
      this.showing = true;
      this.$Notice.info({
        content: "马少东",
        duration: 2
      });
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  mounted() {
    this.$on("dispatch", msg => {
      this.msg = msg;
    });
    this.$bus.$on("ev-bus", msg => {
      this.msg = "bus消息" + msg;
    });
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
